<template>
  <view class="quiz-container">
    <!-- 顶部进度条 -->
    <view class="progress-bar">
      <text class="progress-text">
        第 {{ currentIndex + 1 }}/{{ questions.length }} 题
      </text>
      <u-line-progress
        :percentage="((currentIndex + 1) / questions.length) * 100"
        :showText="false"
        height="12"
        activeColor="#2979ff"
      ></u-line-progress>
    </view>

    <!-- 题目区域 -->
    <scroll-view scroll-y class="quiz-content">
      <view class="question-box">
        <text class="question-text">{{ currentQuestion.question }}</text>

        <!-- 选项列表 -->
        <view class="options-list">
          <view
            v-for="(option, index) in currentQuestion.options"
            :key="index"
            class="option-item"
            :class="{
              selected: selectedIndex === index,
              correct: showResult && index === currentQuestion.answer,
              wrong:
                showResult &&
                selectedIndex === index &&
                selectedIndex !== currentQuestion.answer
            }"
            @click="selectOption(index)"
          >
            <text class="option-prefix">
              {{ String.fromCharCode(65 + index) }}.
            </text>
            <text class="option-text">{{ option }}</text>

            <!-- 结果标记 -->
            <view v-if="showResult" class="result-mark">
              <u-icon
                v-if="index === currentQuestion.answer"
                name="checkmark-circle-fill"
                color="#19be6b"
                size="18"
              ></u-icon>
              <u-icon
                v-else-if="selectedIndex === index"
                name="close-circle-fill"
                color="#fa3534"
                size="18"
              ></u-icon>
            </view>
          </view>
        </view>
      </view>

      <!-- 答案解析 -->
      <view v-if="showResult" class="explanation-box">
        <text class="explanation-title">答案解析</text>
        <text class="explanation-text">{{ currentQuestion.explanation }}</text>
      </view>
    </scroll-view>

    <!-- 底部按钮 -->
    <view class="action-buttons">
      <u-button v-if="showResult" type="primary" @click="nextQuestion">
        {{ currentIndex >= questions.length - 1 ? '查看结果' : '下一题' }}
      </u-button>
      <u-button
        v-else
        type="primary"
        @click="submitAnswer"
        :disabled="selectedIndex === null"
      >
        提交答案
      </u-button>
    </view>
  </view>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'

interface Question {
  question: string
  options: string[]
  answer: number // 正确答案索引
  explanation: string // 答案解析
}

@Component
export default class AnswerQuestions extends Vue {
  questions: Question[] = [
    {
      question: '以下哪种技术可以防止网络攻击中的中间人攻击？',
      options: ['防火墙', '入侵检测系统', 'SSL/TLS加密', 'VPN'],
      answer: 2,
      explanation:
        'SSL/TLS加密通过在通信双方之间建立安全通道，确保数据传输过程中的保密性和完整性，有效防止中间人攻击。防火墙主要用于控制网络流量的进出，入侵检测系统用于监测网络中的异常活动，VPN主要用于建立加密的远程连接。'
    },
    {
      question: '网络安全中的漏洞扫描工具主要用于？',
      options: [
        '检测网络设备故障',
        '查找系统中的安全漏洞',
        '优化网络性能',
        '恢复丢失的数据'
      ],
      answer: 1,
      explanation:
        '漏洞扫描工具通过对系统、网络进行扫描，查找其中存在的安全漏洞，以便及时进行修复，提高系统安全性。它并不用于检测网络设备故障、优化网络性能或恢复丢失的数据。'
    },
    {
      question: '以下哪个是常见的网络安全协议用于传输文件？',
      options: ['HTTP', 'FTP', 'SMTP', 'TCP'],
      answer: 1,
      explanation:
        'FTP（文件传输协议）专门用于在网络上进行文件的传输。HTTP主要用于传输网页等超文本数据，SMTP用于发送电子邮件，TCP是一种传输层协议，提供可靠的数据传输，但不是专门用于文件传输的协议。'
    },
    {
      question: '在网络安全中，端口扫描的目的通常是？',
      options: [
        '检查网络连通性',
        '发现开放的端口及对应的服务',
        '获取目标主机的IP地址',
        '修改目标主机的网络配置'
      ],
      answer: 1,
      explanation:
        '端口扫描通过向目标主机的一系列端口发送探测数据包，以确定哪些端口处于开放状态，并识别这些端口上运行的服务，从而发现潜在的安全风险。它不是用于检查网络连通性（ping命令可用于此）、获取目标主机的IP地址或修改目标主机的网络配置。'
    },
    {
      question: '网络钓鱼攻击中，攻击者常用的手段不包括？',
      options: [
        '仿冒正规网站',
        '发送含恶意链接的邮件',
        '使用暴力破解密码',
        '利用社交工程获取信任'
      ],
      answer: 2,
      explanation:
        '网络钓鱼攻击通常通过仿冒正规网站、发送含恶意链接的邮件、利用社交工程获取用户信任等手段来诱使用户泄露敏感信息。暴力破解密码一般不属于网络钓鱼攻击的常用手段，而是一种破解密码的方式。'
    },
    {
      question: '以下哪种设备通常用于企业网络安全防护中的边界防护？',
      options: ['路由器', '交换机', '防火墙', '入侵检测系统'],
      answer: 2,
      explanation:
        '防火墙是企业网络安全防护中常用的边界防护设备，它位于企业内部网络和外部网络之间，对进出网络的流量进行过滤和监控，防止未经授权的访问和攻击。路由器主要用于网络互联，交换机用于局域网内的数据交换，入侵检测系统侧重于监测网络中的异常活动。'
    },
    {
      question: '在网络安全领域，蜜罐技术的作用是？',
      options: [
        '吸引黑客攻击并收集其行为信息',
        '加速网络访问速度',
        '存储重要的网络数据',
        '防止病毒传播'
      ],
      answer: 0,
      explanation:
        '蜜罐是一种诱捕系统，故意设置一些看似有价值但实际是陷阱的资源，吸引黑客攻击，从而收集黑客的行为模式、攻击手段等信息，帮助安全人员更好地了解威胁并采取应对措施。它与加速网络访问速度、存储重要网络数据和防止病毒传播无关。'
    },
    {
      question: '以下哪种网络安全威胁可能导致系统数据被篡改？',
      options: ['病毒', '蠕虫', '木马', '以上都有可能'],
      answer: 3,
      explanation:
        '病毒、蠕虫和木马都可能对系统数据造成破坏，包括篡改数据。病毒可能会感染系统文件并修改数据，蠕虫可通过网络传播并破坏数据，木马则可能窃取并篡改用户数据。所以以上选项都有可能导致系统数据被篡改。'
    },
    {
      question: '网络安全中的访问控制主要基于什么来限制对资源的访问？',
      options: ['用户身份', 'IP地址', '时间', '以上都是'],
      answer: 3,
      explanation:
        '访问控制可以基于用户身份（如用户名和密码认证）、IP地址（限制特定IP范围的访问）、时间（设定特定时间段的访问权限）等多种因素来限制对资源的访问，确保只有授权的用户在合适的时间和地点能够访问相应资源。'
    },
    {
      question: '以下哪种安全机制可以防止网络流量被嗅探？',
      options: ['加密传输', 'MAC地址过滤', '端口绑定', '防火墙规则'],
      answer: 0,
      explanation:
        '加密传输通过对数据进行加密处理，使得即使网络流量被嗅探，攻击者也无法获取其中的敏感信息。MAC地址过滤主要用于限制网络设备的接入，端口绑定可增强网络连接的安全性但与防止流量嗅探关系不大，防火墙规则侧重于控制网络流量的进出，对防止流量嗅探不如加密传输直接有效。'
    }
  ]

  currentIndex = 0
  selectedIndex: number | null = null
  showResult = false
  score = 0

  get currentQuestion(): Question {
    return this.questions[this.currentIndex]
  }

  selectOption(index: number) {
    if (!this.showResult) {
      this.selectedIndex = index
    }
  }

  submitAnswer() {
    if (this.selectedIndex === null) return

    this.showResult = true
    if (this.selectedIndex === this.currentQuestion.answer) {
      this.score++
    }
  }

  nextQuestion() {
    if (this.currentIndex < this.questions.length - 1) {
      this.currentIndex++
      this.selectedIndex = null
      this.showResult = false
    } else {
      this.showQuizResult()
    }
  }

  showQuizResult() {
    uni.showModal({
      title: '答题完成',
      content: `您的得分: ${this.score}/${this.questions.length}`,
      showCancel: false,
      success: () => {
        this.resetQuiz()
      }
    })
  }

  resetQuiz() {
    this.currentIndex = 0
    this.selectedIndex = null
    this.showResult = false
    this.score = 0
  }
}
</script>

<style lang="scss" scoped>
.quiz-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
  padding: 20rpx;
}

.progress-bar {
  margin-bottom: 30rpx;

  .progress-text {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 10rpx;
    display: block;
  }
}

.quiz-content {
  flex: 1;
}

.question-box {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;

  .question-text {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 40rpx;
    line-height: 1.5;
  }
}

.options-list {
  .option-item {
    padding: 24rpx;
    margin-bottom: 20rpx;
    border: 1rpx solid #e4e7ed;
    border-radius: 12rpx;
    display: flex;
    align-items: center;
    background-color: #fff;

    &.selected {
      border-color: #2979ff;
      background-color: #f0f7ff;
    }

    &.correct {
      border-color: #19be6b;
      background-color: #f0f9eb;
    }

    &.wrong {
      border-color: #fa3534;
      background-color: #fef0f0;
    }

    .option-prefix {
      color: #2979ff;
      font-weight: bold;
      margin-right: 16rpx;
    }

    .option-text {
      flex: 1;
      font-size: 28rpx;
      color: #333;
    }

    .result-mark {
      margin-left: 16rpx;
    }
  }
}

.explanation-box {
  background-color: #f8f8f8;
  border-radius: 16rpx;
  padding: 30rpx;

  .explanation-title {
    font-size: 28rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
    display: block;
  }

  .explanation-text {
    font-size: 26rpx;
    color: #666;
    line-height: 1.6;
  }
}

.action-buttons {
  padding: 20rpx 0;

  .u-button {
    width: 100%;
  }
}
</style>
